<script setup lang="ts">
import { onMounted, reactive, ref, nextTick, defineProps, watch } from "vue";
import { useStore } from "@/store/index";
import * as echarts from "echarts";
import "@/assets/map/china";

const props = defineProps<{
  uuid: string;
}>();

const store = useStore();
onMounted(() => {
  var option = {
    geo: {
      map: "china",
      label: {
        show: false,
        color: "#fff",
        formatter: function (params: any) {
          return params.name;
        },
      },
      itemStyle: {
        normal: {
          areaColor: "#238cc6",
          borderColor: "#ffffff",
        },
        emphasis: {
          areaColor: "#ff0",
        },
      },
    },
    series: [
      {
        name: "城市",
        type: "effectScatter",
        coordinateSystem: "geo",
        data: [
          { name: "北京", value: [116.46, 39.92] },
          { name: "上海", value: [121.48, 31.22] },
          { name: "广州", value: [113.23, 23.16] },
        ],
        symbolSize: 10,
        showEffectOn: "render",
        rippleEffect: {
          brushType: "stroke",
        },
        hoverAnimation: true,
        itemStyle: {
          color: "#ca666f",
        },
      },
      {
        type: "lines",
        zlevel: 2,
        effect: {
          show: true,
          period: 6,
          trailLength: 0.7,
          symbol: "arrow",
          symbolSize: 5,
        },
        lineStyle: {
          normal: {
            color: "#FFA500",
            width: 1,
            opacity: 0.6,
            curveness: 0.2,
          },
        },
        data: [
          {
            fromName: "北京",
            toName: "上海",
            coords: [
              [116.46, 39.92],
              [121.48, 31.22],
            ],
          },
          {
            fromName: "北京",
            toName: "广州",
            coords: [
              [116.46, 39.92],
              [113.23, 23.16],
            ],
          },
        ],
      },
    ],
  };
  const chartDom = document.getElementById(props.uuid);
  if (chartDom) {
    const myChart = echarts.init(chartDom);
    myChart.setOption(option);
    watch(
      () => store.widgetConfig[props.uuid].height,
      () => {
        myChart.resize();
      }
    );
    watch(
      () => store.widgetConfig[props.uuid].width,
      () => {
        myChart.resize();
      }
    );
  }
});
</script>

<template>
  <div :id="uuid" style="width: 100%; height: 100%"></div>
</template>

<style lang="less"></style>
